<template>
  <div id="pie"></div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
  markRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
let myChart = ref(null);

function initChart() {
  let dataList = [
    {
      name: "今日",
      value: "2229",
    },
    {
      name: "昨日",
      value: "200",
    },
  ];
  const color = [
    ["#176FF9", "#176FF9"],
    ["#F73249", "#F73249"],
    ["#F8E000", "#F8E000"],
  ];
  let data = {
    primarySector: 36,
    primarySectorPercent: 3,
  };
  let total = dataList.reduce((a, b) => {
    console.log(a, b);
    return b.name + b.value * 1;
  }, 0);
  // 复制代码
  const chartData = [
    {
      value: 22,
      name: "昨日",
      itemStyle: {
        shadowOffsety: 20,
        color: "#F73249",
      },
    },
    {
      value: 33,
      name: "今日",
      itemStyle: {
        color: "#176FF9",
      },
    },
  ];
  let textColors = [];
  const sum = chartData.reduce((per, cur) => per + cur.value, 0);
  const gap = (1 * sum) / 100;
  const pieData1 = [];
  const gapData = {};

  //图标位置显示F
  let legendData = [];
  //   let total = 0;
  chartData.forEach((item) => {
    total += item.value;
  });

  for (let i = 0; i < chartData.length; i++) {
    // 第一圈数据
    pieData1.push({
      ...chartData[i],
    });
    pieData1.push(gapData);
  }
  let option = {
    backgroundColor: "#061021",
    title: {
      text: "123%",
      subtext: "环比",
      x: "49%",
      y: "41%",
      itemGap: 10,
      textStyle: {
        color: "#F6F6F6",
        fontSize: 16,
      },
      subtextStyle: {
        color: "#f5f5f6",
        fontSize: 16,
      },
      textAlign: "center",
    },
    tooltip: {
      show: true,
      textStyle: {
        color: "#000",
        fontSize: 16,
      },
      backgroundColor: "rgba(255,255,255,1)",
    },
    series: [
      {
        type: "pie",
        radius: ["48%", "70%"],
        center: "center",
        data: pieData1,
        labelLine: {
          length: 10,
          length2: 70,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: true,
          color: "#fff",
          fontSize: 16,
          lineHeight: 20,
        },
      },
      {
        type: "pie",
        radius: ["48%", "37.5%"],
        center: "center",
        animation: false,
        hoverAnimation: false,
        data: [
          {
            value: 100,
          },
        ],
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "#fff",
          },
        },
      },
      {
        type: "pie",
        startAngle: 10,
        radius: "37.8%",
        animation: false,
        hoverAnimation: false,
        center: "center",
        itemStyle: {
          normal: {
            labelLine: {
              show: false,
              fontSize: 15,
              lineHeight: 22,
              // position: "outside",
              distanceToLabelLine: -70,
              align: "center",
              formatter: function (params) {
                console.log(params, "params");
                const name = params.name;
                const percent = params.value + "个";
                const index = params.dataIndex || 0;
                console.log(name, index, "@@");
                return [`{a${index}|${name}}\n{b${index}|${percent}}`];
              },
            },
          },
        },
        data: [
          {
            value: 100,
          },
        ],
      },
    ],
  };

  myChart?.value?.setOption(option);
}

onMounted(() => {
  myChart.value = markRaw(echarts.init(document.getElementById("pie")));
  initChart();
  window.addEventListener("resize", resize);
});
watch();
const resize = () => {
  myChart.value.resize();
};
onUnmounted(() => {
  removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
#pie {
  width: 100%;
  height: 30vh;
  margin-top: 2vh;
}
</style>
